import React from 'react'
import debounce from 'lodash/debounce'
import ColorPicker from 'components/ColorPicker'
import { Row, Col, Input ,Checkbox ,InputNumber ,Select} from 'antd'
const styles = require('../Workbench.less')
import { getCorrectInputNumber } from '../../util'
const Option = Select.Option
export interface CarouselSection {
  rowNum: number,  //表行数
  headerBGC: string, //表头背景色
  oddRowBGC: string, //奇数行背景色
  evenRowBGC: string,//偶数行背景色
  hoverPause: boolean,  //悬浮暂停轮播
  waitTime: number,  //轮播时间间隔(ms)
  headerHeight: number, //表头高度
  columnWidth: number,  //列宽度
  align: string,        //列对齐方式
  index: boolean,        //显示行号
  indexHeader: string,  //行号表头
  carousels: string,    //轮播方式

  height: number,       //列表高度
  color:string,         //字体颜色
  width: number,       //列表宽度
}

interface CarouselSectionProps {
  title: string
  config: CarouselSection
  onChange: (prop: string, value: any) => void
}
export class CarouselSection extends React.PureComponent<CarouselSectionProps, {}> {

  private debounceInputChange = null

  constructor (props: CarouselSectionProps) {
    super(props)
    this.debounceInputChange = debounce(props.onChange, 1500)
  }

  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private inputNumberChange = (prop) => (value) => {
    this.props.onChange(prop, getCorrectInputNumber(value))
  }

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render () {
    const { title, config } = this.props
    const { rowNum , headerBGC ,oddRowBGC ,evenRowBGC ,waitTime ,headerHeight ,columnWidth ,align ,index ,indexHeader ,carousels ,hoverPause , height , color ,width}  = config
    const list = [ { name: '单行轮播', value: 'single' },{ name: '整页轮播', value: 'page' }]
    const aligns = [{ name: '居中对齐', value: 'center' },{ name: '居左对齐', value: 'left' },{ name: '居右对齐', value: 'right' }]
    const indexHeaders = [{ name: '#', value: '#' },{ name: '-', value: '-' }]
    const carouselList = list.map((l) => (
      <Option key={l.value} value={l.value}>{l.name}</Option>
    ))
    const alignlist = aligns.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))
    const indexHeaderLists = indexHeaders.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
        <Col span={4}>
          <Checkbox
            checked={hoverPause}
            onChange={this.checkboxChange('hoverPause')}
          />
        </Col>
        <Col span={8}>悬浮暂停</Col>
        <Col span={4}>
          <Checkbox
            checked={index}
            onChange={this.checkboxChange('index')}
          />
        </Col>
        <Col span={8}>显示行号</Col>
      </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
        <Col span={4}>轮播方式</Col>
        <Col span={8}>
          <Select
            placeholder="样式"
            className={styles.blockElm}
            value={carousels}
            onChange={this.selectChange('carousels')}
          >
            {carouselList}
          </Select>
        </Col>
        <Col span={4}>轮播间隔</Col>
        <Col span={8}>
          <InputNumber
            placeholder="waitTime"
            className={styles.blockElm}
            value={waitTime}
            onChange={this.inputNumberChange('waitTime')}
          />
        </Col>
      </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>字体颜色</Col>
          <Col span={8}>
            <ColorPicker
                value={color}
                onChange={this.colorChange('color')}
              />
          </Col>
          <Col span={4}>表头背景</Col>
          <Col span={8}>
            <ColorPicker
                value={headerBGC}
                onChange={this.colorChange('headerBGC')}
              />
          </Col>
        </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>奇行背景</Col>
          <Col span={8}>
            <ColorPicker
                value={oddRowBGC}
                onChange={this.colorChange('oddRowBGC')}
              />
          </Col>
          <Col span={4}>偶行背景</Col>
          <Col span={8}>
            <ColorPicker
                value={evenRowBGC}
                onChange={this.colorChange('evenRowBGC')}
              />
          </Col>
        </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>表头高度</Col>
          <Col span={8}>
            <InputNumber
                placeholder="width"
                className={styles.blockElm}
                value={headerHeight}
                onChange={this.inputNumberChange('headerHeight')}
              />
          </Col>
          <Col span={4}>每列宽度</Col>
          <Col span={8}>
            <InputNumber
                placeholder="width"
                className={styles.blockElm}
                value={columnWidth}
                onChange={this.inputNumberChange('columnWidth')}
              />
          </Col>
        </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>列表行数</Col>
          <Col span={8}>
            <InputNumber
                placeholder="width"
                className={styles.blockElm}
                value={rowNum}
                onChange={this.inputNumberChange('rowNum')}
              />
          </Col>
          <Col span={4}>列表对齐</Col>
          <Col span={8}>
            <Select
                placeholder="对齐方式"
                className={styles.blockElm}
                value={align}
                onChange={this.selectChange('align')}
              >
                {alignlist}
            </Select>
            </Col>
        </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>布局高度</Col>
          <Col span={8}>
            <InputNumber
                placeholder="height"
                className={styles.blockElm}
                value={height}
                onChange={this.inputNumberChange('height')}
              />
          </Col>
          <Col span={4}>布局宽度</Col>
          <Col span={8}>
            <InputNumber
                placeholder="width"
                className={styles.blockElm}
                value={width}
                onChange={this.inputNumberChange('width')}
              />
          </Col>
          </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>列表表头</Col>
          <Col span={8}>
          <Select
              placeholder="行号表头"
              className={styles.blockElm}
              value={indexHeader}
              onChange={this.selectChange('indexHeader')}
            >
              {indexHeaderLists}
          </Select>
          </Col>
        </Row>
      </div>
    )
  }
}

export default CarouselSection
